<template>
  <div class="row justify-content-center">
    <div class="col-8">
      <form name="editForm" role="form" novalidate v-on:submit.prevent="save()" v-if="userAccount">
        <h2 id="myUserLabel" v-text="$t('userManagement.home.createOrEditLabel')">
          Create or edit a User
        </h2>
        <div>
          <div class="form-group" :hidden="!userAccount.id">
            <label v-text="$t('global.field.id')">ID</label>
            <input type="text" class="form-control" name="id" v-model="userAccount.id" readonly />
          </div>

          <div class="form-group">
            <label class="form-control-label" v-text="$t('userManagement.login')">Login</label>
            <input type="text" class="form-control" name="login"
              :class="{ valid: !$v.userAccount.login.$invalid, invalid: $v.userAccount.login.$invalid }"
              v-model="$v.userAccount.login.$model" />

            <div v-if="$v.userAccount.login.$anyDirty && $v.userAccount.login.$invalid">
              <small class="form-text text-danger" v-if="!$v.userAccount.login.required"
                v-text="$t('entity.validation.required')">
                This field is required.
              </small>

              <small class="form-text text-danger" v-if="!$v.userAccount.login.maxLength"
                v-text="$t('entity.validation.maxlength', { max: 50 })">
                This field cannot be longer than 50 characters.
              </small>

              <small class="form-text text-danger" v-if="!$v.userAccount.login.pattern"
                v-text="$t('entity.validation.patternLogin')">
                This field can only contain letters, digits and e-mail addresses.
              </small>
            </div>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="firstName" v-text="$t('userManagement.firstName')">First Name</label>
            <input type="text" class="form-control" id="firstName" name="firstName"
              v-bind:placeholder="$t('settings.form[\'firstname.placeholder\']')"
              :class="{ valid: !$v.userAccount.firstName.$invalid, invalid: $v.userAccount.firstName.$invalid }"
              v-model="$v.userAccount.firstName.$model" />
            <div v-if="$v.userAccount.firstName.$anyDirty && $v.userAccount.firstName.$invalid">
              <small class="form-text text-danger" v-if="!$v.userAccount.firstName.maxLength"
                v-text="$t('entity.validation.maxlength', { max: 50 })">
                This field cannot be longer than 50 characters.
              </small>
            </div>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="lastName" v-text="$t('userManagement.lastName')">Last Name</label>
            <input type="text" class="form-control" id="lastName" name="lastName"
              v-bind:placeholder="$t('settings.form[\'lastname.placeholder\']')"
              :class="{ valid: !$v.userAccount.lastName.$invalid, invalid: $v.userAccount.lastName.$invalid }"
              v-model="$v.userAccount.lastName.$model" />
            <div v-if="$v.userAccount.lastName.$anyDirty && $v.userAccount.lastName.$invalid">
              <small class="form-text text-danger" v-if="!$v.userAccount.lastName.maxLength"
                v-text="$t('entity.validation.maxlength', { max: 50 })">
                This field cannot be longer than 50 characters.
              </small>
            </div>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="email" v-text="$t('userManagement.email')">Email</label>
            <input type="email" class="form-control" id="email" name="email"
              v-bind:placeholder="$t('global.form[\'email.placeholder\']')"
              :class="{ valid: !$v.userAccount.email.$invalid, invalid: $v.userAccount.email.$invalid }"
              v-model="$v.userAccount.email.$model" email required />
            <div v-if="$v.userAccount.email.$anyDirty && $v.userAccount.email.$invalid">
              <small class="form-text text-danger" v-if="!$v.userAccount.email.required"
                v-text="$t('global.messages.validate.email.required')">
                Your email is required.
              </small>
              <small class="form-text text-danger" v-if="!$v.userAccount.email.email"
                v-text="$t('global.messages.validate.email.invalid')">
                Your email is invalid.
              </small>
              <small class="form-text text-danger" v-if="!$v.userAccount.email.minLength"
                v-text="$t('global.messages.validate.email.minlength')">
                Your email is required to be at least 5 characters.
              </small>
              <small class="form-text text-danger" v-if="!$v.userAccount.email.maxLength"
                v-text="$t('global.messages.validate.email.maxlength')">
                Your email cannot be longer than 50 characters.
              </small>
            </div>
          </div>
          <div class="form-check">
            <label class="form-check-label" for="activated">
              <input class="form-check-input" :disabled="userAccount.id === null" type="checkbox" id="activated"
                name="activated" v-model="userAccount.activated" />
              <span v-text="$t('userManagement.activated')">Activated</span>
            </label>
          </div>

          <%_ if (enableTranslation) { _%>
          <div class="form-group" v-if="languages && Object.keys(languages).length > 0">
            <label for="langKey" v-text="$t('userManagement.langKey')">Language</label>
            <select class="form-control" id="langKey" name="langKey" v-model="userAccount.langKey">
              <option v-for="(language, key) in languages" :value="key" :key="key">{{ language.name }}</option>
            </select>
          </div>
          <%_ } _%>
          <div class="form-group">
            <label v-text="$t('userManagement.profiles')">Profiles</label>
            <select class="form-control" multiple name="authority" v-model="userAccount.authorities">
              <option v-for="authority of authorities" :value="authority" :key="authority">{{ authority }}</option>
            </select>
          </div>
        </div>
        <div>
          <button type="button" class="btn btn-secondary" v-on:click="previousState()">
            <font-awesome-icon icon="ban"></font-awesome-icon>&nbsp;<span
              v-text="$t('entity.action.cancel')">Cancel</span>
          </button>
          <button type="submit" :disabled="$v.userAccount.$invalid || isSaving" class="btn btn-primary">
            <font-awesome-icon icon="save"></font-awesome-icon>&nbsp;<span v-text="$t('entity.action.save')">Save</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script lang="ts" src="./user-management-edit.component.ts"></script>